<template>
  <el-dialog
    :modal="false"
    append-to-body
    title="公共商品库存锁定"
    :visible.sync="dialogShow"
    width="20%"
    :before-close="handleClose"
    center>
    <div>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="公共库存">
          <el-input :disabled="true" v-model="remote.number"></el-input>
        </el-form-item>
        <el-form-item label="当前锁定库存">
          <el-input :disabled="true" v-model="remote.currentLockNumber"></el-input>
          <span style="color: #de4348;">ps: 锁定库存应该等于当前库存，抢购中的商品可能出现不一致的情况 </span>
        </el-form-item>
        <el-form-item label="当前库存">
          <el-input-number v-model="form.number" :min="0" :max="remote.number" label="本次需要锁定的库存"></el-input-number>
        </el-form-item>
        <el-form-item label="">
          {{form.number - goods.goodsNumber}}
          <span style="color: #de4348;">ps: 负数表示库存回退 </span>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogClose">取 消</el-button>
    <el-button type="primary" @click="submitForm('form')">保 存</el-button>
     <el-button type="danger" @click="syncNumber">同步库存</el-button>
  </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogShow: false,
      goods:{},
      remote:{
        number: 0, // 公共库存
        currentLockNumber: 0, // 当前锁定库存
      },
      form: {
        goodsId: '', // 商品ID
        number: 0 // 需要锁定或解锁的库存
      },
      rules: {
        lockNumber: [
          { validator: (rule, value, callback) => {
              if (value === 0) {
                callback(new Error('锁定库存不能为0'))
              } else {
                callback()
              }
            }, trigger: 'blur' }
        ]
      }
    };
  },
  props:{
    value: false,
    goodsId: {},
  },
  watch: {
    value(now,old){
      this.dialogShow = now
      if(now){
        this.init()
      }
    }
  },
  methods: {
    syncNumber(){
      // 同步商品库存
      this.$http({
        url: `/mch/numlock/syncNumber/${this.form.goodsId}`,
        method: 'get'
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500
          })
          this.dialogClose()
        }
      })
    },
    init(){
      this.form.goodsId = this.goodsId
      this.$http({
        url: `/mall/goods/info/${this.form.goodsId}`,
        method: 'get'
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.goods = data.goods
          this.form.number = this.goods.goodsNumber
        }
      })
      this.$http({
        url: `/mch/numlock/getStock/${this.form.goodsId}`,
        method: 'get'
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.remote = data.data
        }
      })
    },
    handleClose(){
      this.dialogClose()
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let temp = JSON.parse(JSON.stringify(this.form))
          temp.number = temp.number - this.goods.goodsNumber
          this.$http({
            url: `/mch/numlock/lockStock`,
            method: 'post',
            data: temp
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$emit("numChange",this.form.number)
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500
              })
              this.dialogClose()
            }
          })
        }
      });
    },
    dialogClose() {
      this.dialogShow = false
      this.$emit("input",this.dialogShow)
    }
  }
};
</script>
